<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>江门市青少年宫</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta http-equiv="Access-Control-Allow-Origin" content="*">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="/static/layui-v2.6.3/css/layui.css" media="all">
    <style>
        body{
            background-color: whitesmoke;
        }
    </style>
</head>
<body>
<blockquote class="layui-elem-quote">考试详情</blockquote>

<div class="layui-container">
    <div class="layui-row">
        <div class="layui-col-md8">
            <form class="layui-form">
{#                单选题#}
                {% if all_question[all_question_count]["type"] == 0 %}
                    <input id="question_type" name="question_type" hidden value="0">
                    <input id="question_id" name="question_id" hidden value={{ all_question[all_question_count]["id_question"] }}>
                    <div class='layui-form-item'>
                        <p>{{ all_question_count + 1 }}. 问题: {{ all_question[all_question_count]["question"] }}</p>
                    </div>
                    <div class='layui-form-item'>
                        <p>A: {{ all_question[all_question_count]["a"] }}</p>
                    </div>
                    <div class='layui-form-item'>
                        <p>B: {{ all_question[all_question_count]["b"] }}</p>
                    </div>
                    <div class='layui-form-item'>
                        <p>C: {{ all_question[all_question_count]["c"] }}</p>
                    </div>
                    <div class='layui-form-item'>
                        <p>D: {{ all_question[all_question_count]["d"] }}</p>
                    </div>
                    {% if answer_list.get(all_question_count) == None %}
                        <div class='layui-form-item'>
                            <p>请选择答案</p>
                            <input type="radio" name="my_answer" value="a" title="A">
                            <input type="radio" name="my_answer" value="b" title="B">
                            <input type="radio" name="my_answer" value="c" title="C">
                            <input type="radio" name="my_answer" value="d" title="D">
                        </div>
                    {% else %}
                        <div class='layui-form-item'>
                            {% if answer_list.get(all_question_count) == "A" %}
                                <input type="radio" name="my_answer" value="a" title="A" checked>
                            {% else %}
                                <input type="radio" name="my_answer" value="a" title="A">
                            {% endif %}

                            {% if answer_list.get(all_question_count) == "B" %}
                                <input type="radio" name="my_answer" value="b" title="B" checked>
                            {% else %}
                                <input type="radio" name="my_answer" value="b" title="B">
                            {% endif %}

                            {% if answer_list.get(all_question_count) == "C" %}
                                <input type="radio" name="my_answer" value="c" title="C" checked>
                            {% else %}
                                <input type="radio" name="my_answer" value="c" title="C">
                            {% endif %}

                            {% if answer_list.get(all_question_count) == "D" %}
                                <input type="radio" name="my_answer" value="d" title="D" checked>
                            {% else %}
                                <input type="radio" name="my_answer" value="d" title="D">
                            {% endif %}
                        </div>
                    {% endif %}

{#                判断题#}
                {% elif all_question[all_question_count]["type"] == 1 %}
                    <input id="question_type" name="question_type" hidden value="1">
                    <input id="question_id" name="question_id" hidden value={{ all_question[all_question_count]["id_question"] }}>
                    <div class='layui-form-item'>
                        <p>{{ all_question_count + 1 }}. 问题: {{ all_question[all_question_count]["question"] }}</p>
                    </div>
                    <div class='layui-form-item'>
                          {% if answer_list.get(all_question_count) == None %}
                              <p>请选择答案</p>
                              <input type="radio" name="my_answer" value="1" title="对">
                              <input type="radio" name="my_answer" value="0" title="错">
                          {% else %}
                              {% if answer_list.get(all_question_count) == '对' %}
                                  <input type="radio" name="my_answer" value="1" title="对" checked>
                                  <input type="radio" name="my_answer" value="0" title="错">
                              {% else %}
                                  <input type="radio" name="my_answer" value="1" title="对">
                                  <input type="radio" name="my_answer" value="0" title="错" checked>
                              {% endif %}
                          {% endif %}
                    </div>
{#                简答题#}
                {% elif all_question[all_question_count]["type"] == 2 %}
                    <input id="question_type" name="question_type" hidden value="2">
                    <input id="question_id" name="question_id" hidden value={{ all_question[all_question_count]["id_question"] }}>
                    <div class='layui-form-item'>
                        <p>{{ all_question_count + 1 }}. 问题: {{ all_question[all_question_count]["question"] }}</p>
                    </div>
                    {% if answer_list.get(all_question_count) == None %}
                        <div class='layui-form-item'>
                            <textarea name='my_answer' placeholder='请输入回答' autocomplete='off' class='layui-textarea'></textarea>
                        </div>
                    {% else %}
                        <div class='layui-form-item'>
                            <textarea name='my_answer' placeholder='请输入回答' autocomplete='off' class='layui-textarea'>{{ answer_list.get(all_question_count) }}</textarea>
                        </div>
                    {% endif %}

{#                多选题#}
                {% elif all_question[all_question_count]["type"] == 3 %}
                    <input id="question_type" name="question_type" hidden value="3">
                    <input id="question_id" name="question_id" hidden value={{ all_question[all_question_count]["id_question"] }}>
                    <div class='layui-form-item'>
                        <p>{{ all_question_count + 1 }}. 问题: {{ all_question[all_question_count]["question"] }}</p>
                    </div>
                    <div class='layui-form-item'>
                        <p>A: {{ all_question[all_question_count]["a"] }}</p>
                    </div>
                    <div class='layui-form-item'>
                        <p>B: {{ all_question[all_question_count]["b"] }}</p>
                    </div>
                    <div class='layui-form-item'>
                        <p>C: {{ all_question[all_question_count]["c"] }}</p>
                    </div>
                    <div class='layui-form-item'>
                        <p>D: {{ all_question[all_question_count]["d"] }}</p>
                    </div>
                    {% if answer_list.get(all_question_count) == None %}
                        <div class='layui-form-item'>
                            <label class='layui-form-label'>请选择答案</label>
                            <div class='layui-input-block'>
                              <input id="a" value="a" type="checkbox" name="a" title="A">
                              <input id="b" value="b" type="checkbox" name="b" title="B">
                              <input id="c" value="c" type="checkbox" name="c" title="C">
                              <input id="d" value="d" type="checkbox" name="d" title="D">
                            </div>
                        </div>
                    {% else %}
                        <div class='layui-form-item'>
                            <label class='layui-form-label'>请选择答案</label>
{#                            <label class='layui-form-label'>已选择答案：{{ answer_list.get(all_question_count) }}</label>#}
                            <div class='layui-input-block'>
                              {% if 'A' in answer_list.get(all_question_count) %}
                                  <input id="a" value="a" type="checkbox" name="a" title="A" checked>
                              {% else %}
                                  <input id="a" value="a" type="checkbox" name="a" title="A">
                              {% endif %}

                              {% if 'B' in answer_list.get(all_question_count) %}
                                  <input id="b" value="b" type="checkbox" name="b" title="B" checked>
                              {% else %}
                                  <input id="b" value="b" type="checkbox" name="b" title="B">
                              {% endif %}

                              {% if 'C' in answer_list.get(all_question_count) %}
                                  <input id="c" value="c" type="checkbox" name="c" title="C" checked>
                              {% else %}
                                  <input id="c" value="c" type="checkbox" name="c" title="C">
                              {% endif %}

                              {% if 'D' in answer_list.get(all_question_count) %}
                                  <input id="d" value="d" type="checkbox" name="d" title="D">
                              {% else %}
                                  <input id="d" value="d" type="checkbox" name="d" title="D">
                              {% endif %}
                            </div>
                        </div>
                    {% endif %}

{#                图片题#}
                {% elif all_question[all_question_count]["type"] == 4 %}
                    <input id="question_type" name="question_type" hidden value="4">
                    <input id="question_id" name="question_id" hidden value={{ all_question[all_question_count]["id_question"] }}>
                    <div class='layui-form-item'>
                        {{ all_question_count + 1 }}. <br><img src="{{ all_question[all_question_count]["question"] }}">
                    </div>
                    {% if answer_list.get(all_question_count) == None %}
                        <div class='layui-form-item'>
                            <textarea name='my_answer' placeholder='请输入回答' autocomplete='off' class='layui-textarea'></textarea>
                        </div>
                    {% else %}
                        <div class='layui-form-item'>
                            <textarea name='my_answer' placeholder='请输入回答' autocomplete='off' class='layui-textarea'>{{ answer_list.get(all_question_count) }}</textarea>
                        </div>
                    {% endif %}
                {% endif %}
                <button class="layui-btn" lay-submit lay-filter="formDemo">下一题</button>
            </form>
{#            <button class="layui-btn" onclick="next_ti_mu({{ all_question[all_question_count]["type"] }});">下一题</button>#}
        </div>
        <div class="layui-col-md4">
            <button class="layui-btn" onclick="submit_papers();">交卷</button>
            <hr/>
            <div class="layui-progress" lay-showPercent="true">
              <div class="layui-progress-bar layui-bg-blue" lay-percent="{{ percentage }}"></div>
            </div>
            {% if single_choice_question|length != 0 %}
                <blockquote class="layui-elem-quote layui-quote-nm">一. 单选题</blockquote>
                <div class="layui-btn-container">
                    {% for i in all_question %}
                        {% if i["type"] == 0 %}
                            {% if answer_list.get(i["count"] - 1) == None %}
                                <button onclick="jump({{ i["count"] - 1 }});" type='button' class='layui-btn layui-btn-primary'>{{ i["count"] }}</button>
                            {% else %}
                                <button onclick="jump({{ i["count"] - 1 }});" type='button' class='layui-btn'>{{ i["count"] }}</button>
                            {% endif %}
                        {% endif %}
                    {% endfor %}
                </div>
            {% endif %}
            {% if judgmental_question|length != 0 %}
                <blockquote class="layui-elem-quote layui-quote-nm">二. 判断题</blockquote>
                <div class="layui-btn-container">
                    {% for i in all_question %}
                        {% if i["type"] == 1 %}
                            {% if answer_list.get(i["count"] - 1) == None %}
                                <button onclick="jump({{ i["count"] - 1 }});" type='button' class='layui-btn layui-btn-primary'>{{ i["count"] }}</button>
                            {% else %}
                                <button onclick="jump({{ i["count"] - 1 }});" type='button' class='layui-btn'>{{ i["count"] }}</button>
                            {% endif %}
                        {% endif %}
                    {% endfor %}
                </div>
            {% endif %}
            {% if short_answer_question|length != 0 %}
                <blockquote class="layui-elem-quote layui-quote-nm">三. 简答题</blockquote>
                <div class="layui-btn-container">
                    {% for i in all_question %}
                        {% if i["type"] == 2 %}
                            {% if answer_list.get(i["count"] - 1) == None %}
                                <button onclick="jump({{ i["count"] - 1 }});" type='button' class='layui-btn layui-btn-primary'>{{ i["count"] }}</button>
                            {% else %}
                                <button onclick="jump({{ i["count"] - 1 }});" type='button' class='layui-btn'>{{ i["count"] }}</button>
                            {% endif %}
                        {% endif %}
                    {% endfor %}
                </div>
            {% endif %}
            {% if multiple_choice_question|length != 0 %}
                <blockquote class="layui-elem-quote layui-quote-nm">四. 多选题</blockquote>
                <div class="layui-btn-container">
                    {% for i in all_question %}
                        {% if i["type"] == 3 %}
                            {% if answer_list.get(i["count"] - 1) == None %}
                                <button onclick="jump({{ i["count"] - 1 }});" type='button' class='layui-btn layui-btn-primary'>{{ i["count"] }}</button>
                            {% else %}
                                <button onclick="jump({{ i["count"] - 1 }});" type='button' class='layui-btn'>{{ i["count"] }}</button>
                            {% endif %}
                        {% endif %}
                    {% endfor %}
                </div>
            {% endif %}
            {% if picture_question|length != 0 %}
                <blockquote class="layui-elem-quote layui-quote-nm">五. 图片题</blockquote>
                <div class="layui-btn-container">
                    {% for i in all_question %}
                        {% if i["type"] == 4 %}
                            {% if answer_list.get(i["count"] - 1) == None %}
                                <button onclick="jump({{ i["count"] - 1 }});" type='button' class='layui-btn layui-btn-primary'>{{ i["count"] }}</button>
                            {% else %}
                                <button onclick="jump({{ i["count"] - 1 }});" type='button' class='layui-btn'>{{ i["count"] }}</button>
                            {% endif %}
                        {% endif %}
                    {% endfor %}
                </div>
            {% endif %}
        </div>
    </div>
</div>
</body>
<script src="/static/jquery-3.4.1/jquery-3.4.1.min.js" charset="utf-8"></script>
<script src="/static/layui-v2.6.3/layui.js" charset="utf-8"></script>
<script>
    var count = 0;
    var data = "";

    function jump(index) {
        $.post(
            "/student/jump",
            {
                "index": index
            },
            function (data,state) {
                window.location.reload();
            }
        );
    }
</script>
<script>
//Demo
layui.use('form', function(){
  var form = layui.form;

  //监听提交
  form.on('submit(formDemo)', function(data){
    {#layer.msg(JSON.stringify(data.field));#}
      let index = layer.load();
    $.post(
        "/api/student/answer",
        {
            "data": JSON.stringify(data.field)
        },
        function (re_data, state) {
            layer.close(index);

            if(re_data.code == 0){
                window.location.reload();
            }else if(re_data.code == 2){
                layer.alert(re_data.msg, {icon: 5});
            }else {
                //eg2
                layer.confirm('已经是最后一道题，是否交卷？', function(index){
                  //do something
                  $.get(
                      "/api/student/submit_papers",
                      function (data,status) {
                          if(data.code == 0){
                              window.history.back();
                          }else {
                              layer.alert(data.msg);
                          }
                      }
                  );
                  layer.close(index);
                });
                {#alert("已经完成所有题目");#}
            }
        }
    );
    return false;
  });
});
function submit_papers(){
    layer.confirm('是否交卷？', function(index){
      //do something
      $.get(
          "/api/student/submit_papers",
          function (data,status) {
              if(data.code == 0){
                  window.history.back();
              }else {
                  layer.alert(data.msg);
              }
          }
      );
      layer.close(index);
    });
}
</script>
{#<script>#}
{#    function next_ti_mu(question_type) {#}
{#        var my_answer = "";#}
{#        if(question_type == 3){#}
{#            var a = $("#a").prop("checked");#}
{#            var b = $("#b").prop("checked");#}
{#            var c = $("#c").prop("checked");#}
{#            var d = $("#d").prop("checked");#}
{##}
{#            my_answer = String(a)+"&"+String(b)+"&"+String(c)+"&"+String(d);#}
{#        }#}
{#        else {#}
{#            my_answer = document.getElementById("my_answer").value;#}
{#        }#}
{#        $.post(#}
{#            "/student/answer",#}
{#            {#}
{#                "question_type": document.getElementById("question_type").value,#}
{#                "question_id": document.getElementById("question_id").value,#}
{#                "my_answer": my_answer#}
{#            },#}
{#            function (re_data, state) {#}
{#                if(re_data == "success"){#}
{#                    window.location.reload();#}
{#                }#}
{#                else {#}
{#                    //eg2#}
{#                    layer.confirm('已经完成所有题目，是否交卷？', function(index){#}
{#                      //do something#}
{#                      $.get(#}
{#                          "/student/submit_papers",#}
{#                          function (data,status) {#}
{#                              if(data.msg == "success"){#}
{#                                  window.history.back();#}
{#                              }#}
{#                          }#}
{#                      );#}
{#                      layer.close(index);#}
{#                    });#}
                    {#alert("已经完成所有题目");#}
{#                }#}
{#            }#}
{#        );#}
{#    }#}
{#</script>#}
</html>